<template>
    <div>
        <el-row>
            <el-col :span="11">
                <el-container>
                    <el-header class="layout-header">
                        <img
                            :src="require('../assets/imgs/kingbase_logo.png')"
                            class="logo-img"
                        />
                        <span class="header-span">数据库在线体验平台</span>
                    </el-header>
                    <el-container :style="mainHeight" class="layout-main">
                        <el-aside>
                            <AsidePage @showMenu="showMenu" />
                        </el-aside>
                        <el-main id="doc-content">
                            <div class="sidebar" v-if="showSidebar">
                                <!-- 侧边栏内容 -->
                                <NavMenu
                                    :menus="menus"
                                    @changeMenu="changeMenu"
                                    @hideMenu="hideMenu"
                                />
                            </div>
                            <component :is="docComp" />
                        </el-main>
                    </el-container>
                    <el-footer class="layout-footer">
                        <FooterPage
                            :stepNum="stepNum"
                            :totalStep="totalStep"
                            @changeStep="changeStep"
                        />
                    </el-footer>
                </el-container>
            </el-col>
            <el-col :span="13" :style="editorHeight" class="editor-col">
                <!-- 编辑器 -->
                <EditorPage />
            </el-col>
        </el-row>
    </div>
</template>

<script>
import AsidePage from "./AsidePage.vue";
import FooterPage from "./FooterPage.vue";
import EditorPage from "./EditorPage.vue";
import NavMenu from "../components/NavMenu.vue";
import { getMainDocs, getMainDocCompByIndex, getMainDocTotalNum} from "@/docComp.js"

export default {
    name: "Home-Page",
    components: {
        AsidePage,
        FooterPage,
        EditorPage,
        NavMenu,
    },
    data() {
        return {
            menus:[],
            docComp: null,
            mainHeight: {
                height: "",
            },
            editorHeight: {
                height: "",
            },
            showSidebar: false,
            totalStep: 0,
            stepNum: 0,
            isCollapse: true,
        };
    },
    async created() {
        this.mainHeight.height = window.innerHeight - 150 + "px";
        this.editorHeight.height = window.innerHeight + "px";
    },
    mounted(){
        this.totalStep = getMainDocTotalNum();
        this.menus = getMainDocs();
        this.changeStep(0);

        //监听点击代码块复制按钮
        document.getElementById('doc-content').addEventListener('click', e => {
            const target = e.target.closest('.copy-btn')
            if(target){
                const text = target.getAttribute('data-copy-text')
                window.eventBus.$emit("copyToEditor", decodeURIComponent(text))
            }
            
        })
    },
    methods: {
        showMenu() {
            this.showSidebar = true;
        },
        hideMenu() {
            this.showSidebar = false;
        },
        stepNumChange(val) {
            this.stepNum = val+1;
        },
        async changeStep(step) {
            this.stepNum = step;
            this.docComp = await getMainDocCompByIndex(step);
        },
        async changeMenu(step, subTitle){
            await this.changeStep(step);
            let offestTop = 0;
            if(subTitle){
                const id = encodeURI(subTitle.toLowerCase())
                const targetDom = document.getElementById(id);
                offestTop = targetDom.offsetTop - 80;
            }
            const scrollContainer = document.getElementById('doc-content')
            scrollContainer.scrollTop = offestTop;
        }
    },
};
</script>
<style  scoped>
.el-header {
    padding: 0 !important;
}

.el-footer {
    padding: 0 !important;
}

.el-aside {
    width: 40px !important;
    background-color: rgb(240, 241, 243);
}

.layout-header {
    height: 60px;
    box-shadow: 0px 5px 18px 0px #a33b351a;
}

.logo-img {
    height: 60px;
}

.header-span {
    font-size: 30px;
    position: relative;
    bottom: 20px;
}

/* 阴影效果 */
.layout-main {
    box-shadow: 0px 5px 18px 0px rgba(163, 59, 53, 0.1);
}

.layout-footer {
    height: 90px;
}

/* 侧边栏 */
.sidebar {
    width: 300px;
    height: calc(100vh - 150px);
    overflow: auto;
    background-color: rgb(248, 250, 253);
    position: fixed;
    z-index: 99;
}

.editor-col {
    background-color: #131416;
}
</style>
